<template>
	<view class="s-data-panel" v-if="state.countList.length > 0">
		<text class="top-title">数据统计</text>
		<view class="data-grid ss-flex ss-wrap">
			<view
					v-for="(item, index) in state.countList"
					:key="item.name"
					:style="{ animationDelay: `${index * 0.1}s` }"
					class="data-item"
					@tap="toPage(item)"
			>
				<view class="value">{{ item.count }}</view>
				<view class="label">{{ item.name }}</view>
				<view class="ripple"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {computed, onMounted, reactive} from 'vue';
import sheep from '@/sheep';
import {onLoad, onShow} from "@dcloudio/uni-app";

// 模拟统计数据
const state = reactive({
	countList: []
});

// 核心数据查询逻辑（需对接后端）
async function fetchStats() {
	const isLogin = computed(() => sheep.$store('user').isLogin);
	if (isLogin) {
		const res = await sheep.$api.miao.homeCount();
		console.log(res, 'homeCountRes')
		state.countList = res.data
		console.log(state.countList, 'state.countList')
	}
}

function toPage(item) {
	sheep.$router.go(item.pagePath);
}

onMounted(() => {
	fetchStats();
});

onShow(() => {
	fetchStats();
});

onLoad(() => {
	fetchStats();
});
</script>

<style lang="scss" scoped>
.s-data-panel {
	background: linear-gradient(2deg, #3E3A39, #3E3A39, #3E3A39);
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	color: #fff;
	margin-bottom: 20rpx;

	.panel-header {
		margin-bottom: 32rpx;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #fff;
		}

		.update-time {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	.data-grid {
		margin-top: 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* 2列 */
		grid-template-rows: repeat(2, 1fr); /* 2行 */
		gap: 20rpx; /* 间距 */

		.data-item {
			background: #F39800;
			border-radius: 16rpx;
			padding: 32rpx;
			position: relative;
			overflow: hidden;
			animation: fadeInUp 0.5s ease-out both;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.value {
				font-size: 48rpx;
				font-weight: 700;
				color: #fff;
				margin-bottom: 12rpx;
			}

			.label {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.8);
			}

			.trend {
				position: absolute;
				top: 16rpx;
				right: 16rpx;
				font-size: 24rpx;
				padding: 4rpx 12rpx;
				border-radius: 8rpx;

				&.up {
					color: #52c41a;
					background: rgba(82, 196, 26, 0.2);
				}

				&.down {
					color: #ff4d4f;
					background: rgba(255, 77, 79, 0.2);
				}
			}

			.ripple {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 0;
				height: 0;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50%;
				transform: translate(-50%, -50%);
				opacity: 0;
				transition: all 0.6s ease-out;
			}

			&:active .ripple {
				width: 200rpx;
				height: 200rpx;
				opacity: 1;
			}
		}
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.top-title {
	margin-bottom: 40rpx;
	font-weight: bold;
	font-size: 30rpx
}
</style>
